<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度贴吧--全中国最大的中文社区</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.js"></script>
    <script src="/file/bootstrap.min.js"></script>
    <script src="/js/jquery.form.js"></script>
    <style>
        /*div{*/
        /*border: black 1px solid;*/
        /*}*/
        a {
            color: black;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row clearfix">
        <br>
        <div class="col-md-12 column">
            <div class="col-md-4 column" style="padding: 0px">
            </div>
            <div class="col-md-4 column" style="padding: 0px">
                <a href="">网页</a>
                &nbsp <a href="">新闻</a>
                &nbsp <a href="">贴吧</a>
                &nbsp <a href="">知道</a>
                &nbsp <a href="">音乐</a>
                &nbsp <a href="">图片</a>
                &nbsp <a href="">视频</a>
                &nbsp <a href="">地图</a>
                &nbsp<a href="">文库</a>
            </div>
            <div class="col-md-4 column" style="padding: 0px">
                &nbsp <a href="">百度首页</a>
                &nbsp <a href="">StrayDog_Hong</a>
            </div>

        </div>
    </div>
    <hr>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="row clearfix">
                        <div class="col-md-4 column" style="padding: 0px">

                            <pre style="background-color: white;border: 0px">                       <a
                                    href="http://www.baidu.com"><img
                                    style="width: 185px;height: 90px" src="/img/baidu_logo.jpg" alt=""></a></pre>

                        </div>
                        <div class="col-md-4 column" style="padding: 0px">
                            <br><br><br>


                            <input type="text" style="width: 300px;height: 40px"/>
                            <button type="button" class="btn btn-info" style="height: 40px;width: 78px">进入贴吧</button>
                        </div>
                        <div class="col-md-4 column" style="padding: 0px">

                            <br><br><br>
                            <input type="submit" style="height: 40px;width: 80px" value="全吧搜索"/>

                        </div>

                    </div>
                </div>
            </div>


            <div class="container">
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div class="row clearfix">
                            <div class="col-md-2 column">
                                <h3>贴吧列表</h3> <br><br>
                                <ul class="list-unstyled">
                                    <li>
                                        <a href="">魔兽世界</a>
                                    </li>
                                    <li>
                                        <a href="">NBA</a>
                                    </li>
                                    <li>
                                        <a href="">詹姆斯</a>
                                    </li>
                                    <li>
                                        <a href="">海贼王</a>
                                    </li>
                                    <li>
                                        <a href="">火影忍者</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-6 column">
                                <div class="col-md-12 column">
                                    <table id="tab">

                                    </table>
                                </div>
                                <ul class="pagination">
                                    <li>
                                        <a href="javascript:void(0);">上一页</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">1</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">2</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">3</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">4</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">5</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">下一页</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-4 column">
                                <a id="modal-489874" href="#modal-container-489874" role="button" class="btn btn-info"
                                   data-toggle="modal">发帖</a>
                                <!--发帖-->

                                <form id="form_send">
                                    <div class="modal fade" id="modal-container-489874" role="dialog"
                                         aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-hidden="true">×
                                                    </button>
                                                    <h4 class="modal-title" id="myModalLabel">
                                                        标题:<input name="topic" type="text">
                                                    </h4>
                                                </div>
                                                <div class="modal-body">
                                                    内容: <textarea name="contents" id="" cols="70" rows="10"></textarea>

                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        取消
                                                    </button>
                                                    <button type="button" class="btn btn-primary" onclick="send_btn();">发表</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>


                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

</div>
<script>
    $(function () {
        $.ajax({
            url: "/topic/findAll",
            type: "post",
            dataType: "json",
            success: function (data) {
                /*这个方法里是ajax发送请求成功之后执行的代码*/
                showData(data);//我们仅做数据展示
            },
            error: function (msg) {
                alert("ajax连接异常：" + msg);
            }
        });
    });

    //展示数据
    function showData(data) {
        var str = "";//定义用于拼接的字符串
        for (var i = 0; i < data.length; i++) {
            //拼接表格的行和列
            str = '<tr><td style="color: #9DA0A4">'+data[i].bbsTopic.replyCount+'&nbsp&nbsp&nbsp</td><td style="width: 320px"><a href="topic.html?tid=' + data[i].bbsTopic.tid + '">' + data[i].bbsTopic.topic + '</a></td><td style="width: 100px;color: #9DA0A4">'+data[i].user.nickname+'</td><td style="color: #9DA0A4">'+data[i].bbsTopic.time+'</td></tr>';
            //追加到table中
            $("#tab").append(str);

        }
    }


    function send_btn() {
        $("#form_send").ajaxSubmit({
            type:"post",
            url:"/topic/send",
            success: function () {
                alert("发表成功")
                window.location.href = "main.html";
            }
        })
    }
</script>

</body>

</html>